<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link type="text/css" rel="stylesheet" href="/stylesheets/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="/stylesheets/add.css" />

    <link rel="stylesheet" type="text/css" href="/stylesheets/mobiscroll-3.0.0.min.css">
    <script src="/select/jquery.min.js"></script>
    <script src="/select/bootstrap/js/bootstrap.min.js"></script>
    <script src="/select/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script src="/select/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>
    <script type="text/javascript" src="/javascripts/mobiscroll-3.0.0.min.js"></script>

    <!--引入Jq插件-->
    <script type="text/javascript" src="/javascripts/jquery-1.8.3.min.js"></script>

    <title>编辑协会</title>
</head>

<body>
    <div class="panel panel-default">
        <div class="panel-heading">
            编辑协会
        </div>

        <div class="panel-body">
            <div class="input-form">
                <form action="/associations/doEdit" class="form" method="post">
                    <ul>
                        <input type="hidden" name="id" value="<%=associationResult.id%>">
                        <li>

                        <li>
                            <h3>原图片：</h3>
                            <img src="/uploads/<%=associationResult.logo%>" alt=""
                                style="width: 80px;height: 80px;border-radius: 10%;margin-right: 60px;">
                        </li>
                        <li>
                            <h3>上传新logo:</h3>
                            <div style="display: flex;flex-direction: column;">
                                <input style="display: inline;float: left;" type="file" name="logo" id="logo"><img
                                    alt="预览图片" class="preview">
                                <input type="hidden" id="logoVal" name="logoVal">
                            </div>
                        </li>
                        <li>
                            <h3>协会名称:</h3> <input type="text" name="association_name"
                                value="<%=associationResult.association_name%>" />
                        </li>
                        <li>
                            <h3>法人:</h3> <input type="text" name="legalperson"
                                value="<%=associationResult.legalperson%>" />
                        </li>
                        <li>
                            <h3>联系人:</h3> <input type="text" name="contactPerson"
                                value="<%=associationResult.contactPerson%>" />
                        </li>
                        <li>
                            <h3>联系电话:</h3> <input type="text" name="contactMobile"
                                value="<%=associationResult.contactMobile%>" />
                        </li>
                        <li>
                            <h3>办公地址:</h3> <input type="text" name="officeAddress"
                                value="<%=associationResult.officeAddress%>" />
                        </li>
                        <li>
                            <h3>邮箱:</h3> <input type="text" name="email" value="<%=associationResult.email%>" />
                        </li>
                        <li>
                            <h3>简介:</h3> <input type="text" name="introduce" value="<%=associationResult.introduce%>" />
                        </li>
                        <li>
                            <br />
                            <button type="submit" class="btn btn-primary submit">提交</button>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>
    <script>
    </script>
</body>

<script>

    //上传单张图片
    $('#logo').change(function () {
        if (this.files.length != 0) {
            var file = this.files[0], //当前文件对象
                reader = new FileReader(); //FileReader接口提供了读取文件的方法和包含读取结果的事件模型
            if (!reader) {
                this.value = '';//计算机本地路径清空 例如: C:\fakepath\1.jpg---由于浏览器的安全机制，input file的路径时被fakepath代替，隐藏了真实物理路径，保护用户电脑隐私。因为文件路径会暴露你的用户名或者其他内容
                return;
            };
            if (!/image/g.test(file.type)) {//判断类型是不是图片
                fade("请上传图片文件!")
                $('#logoVal').val('')
                $('form .preview').attr('src', '')
                $('form .preview').fadeOut() //淡出效果来隐藏元素
                return
            }
            reader.onload = function (e) {
                this.value = '';
                $('form .preview').attr('src', e.target.result)
                $('form .preview').fadeIn()
                var image = new Image();
                //这里只是回调函数赋值给onload属性，并没有调用。异步事件
                image.onload = function () {
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext("2d");
                    canvas.width = 100;
                    canvas.height = 100;
                    ctx.clearRect(0, 0, 100, 100);//clearRect() 方法清空给定矩形内的指定像素。
                    ctx.drawImage(image, 0, 0, 100, 100);
                    var blob = canvas.toDataURL("image/png");//canvas转换为base64
                    $('#logoVal').val(blob)
                }

                image.src = e.target.result

            };
            reader.readAsDataURL(file);//readAsDataURL方法可以将读取到的文件编码成Data URL,镶嵌在网页中，显示需要用img标签
        };
    })


</script>

</html>